<template>
  <div style="margin: auto"><h1>采购入库</h1></div>
<div>
  供应商
  <el-select v-model="buyer.supId" placeholder="请选择"  style="margin-top: 20px">
    <el-option
        v-for="item in options"
        :key="item.id"
        :label="item.name"
        :value="item.id"
        @click="this.buyer.supId=item.id"
    >
    </el-option>
  </el-select>
<span style="margin-left: 100px">采购人:{{this.loginUser.name}}</span>
</div>
  <el-table
      :data="shop"
      height="250"
      border
      style="width: 100%;margin-top: 200px">
    <el-table-column
        prop="goodsBean.name"
        label="商品名称名称"
        width="300">
    </el-table-column>
    <el-table-column
        prop="goodsBean.brand"
        label="品牌"
        width="200">
    </el-table-column>
    <el-table-column
        prop="goodsBean.price"
        label="采购价"
        width="150">
    </el-table-column>
    <el-table-column
        prop="num"
        label="采购数量"
        width="150">
    </el-table-column>
    <el-table-column
        label="操作"
        width="200">
      <template #default="scope">
        <el-button type="primary" size="small" @click="del(scope.row.id)">移除商品</el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-button type="primary" @click="this.findVisible=true" style="margin-top: 60px;margin-left: 50px;size: 20px">添加商品</el-button>
  <el-button type="primary" @click="addGoods" style="margin-top: 60px;margin-left: 500px;size: 20px">入库</el-button>

  <el-dialog
      v-model= "findVisible"
      title="添加采购商品"
      width="60%"
      center>
    <div style="margin-left: 100px;margin-top: 50px">
      商品编号：<input type="text" v-model="number.number" @blur="findById(number.number)"><br>
      商品名称：<input type="text" v-model="goods.name" :disabled="dd"><br>
      品牌：<input type="text" v-model="goods.brand" :disabled="dd"><br>
      类别：<input type="text" v-model="goods.genre" :disabled="dd"><br>
      采购价：<input type="text" v-model="goods.price"><br>
    </div>
    <div style="margin-left: 100px;margin-top: 50px">
      <img :src="'/project/emFace/'+goods.img" id="faceImg" width="200" height="200"><br>
      商品图片：<input type="file" ref="faceFile" id="file"  style="margin-left: 50px"  @change="changeFace" :disabled="dd"><br>
      采购数量:<input type="text" v-model="goods.num" ><br></div>
    <el-button type="primary" @click="add" style="margin-top: 30px;margin-left: 50px;size: 20px" >确定</el-button>
  </el-dialog>

  <el-dialog
      v-model= "addDiv"
      title=""
      width="20%"
      center>
    <h3>添加成功</h3>
    <el-button type="primary" @click="this.addDiv=false" style="margin-top: 30px;margin-left: 100px;size: 20px" >确定</el-button>
  </el-dialog>
  </template>
<script>
import axios from "axios";
import Index from "@/index";
export default {
  components: {Index},
  data(){
    return{
      shop: [],
      findObj:{},
      options:[],
      loginUser:{},
      buyer:{},
      addObj:{},
      goods:{
      },
      findVisible:false,
      dd:false,
      number:{},
      addDiv:false,
    }
  },
  methods:{

    findByUserId(userId){
      axios.get("/project/buyerCar/findByUserId",{params:{
          userId
        }}).then(resp=>{
        this.shop = resp.data;
      })
    },
    getLoginUser(){
      axios.get("/project/user/getLoginUser").then(resp=>{
        this.loginUser=resp.data;
      })
    },
    findAll(){
      axios.get("/project/supplier/findAll").then(resp=>{
        this.options=resp.data;
      })
    },
    del(id){
      axios.get("/project/buyerCar/del",{params:{buyCarId:id}}).then(resp=>{
        if (resp.data=="ok"){
          this.findByUserId(this.loginUser.id);
        }
      })
    },
    findById(number){
      axios.get("/project/goods/findById",{params:{
        number
        }}).then(resp=>{
            if (resp.data.img==null){
              this.addObj.option="add";
              this.dd=false;
            }else {
              this.dd=true;
              this.addObj.option="ad";
            }
            this.goods=resp.data;
            this.goods.num=0;
      })
    },
     add() {
      this.goods.number=this.number.number;
      this.addObj.num=this.goods.num;
      axios.get("/project/buyerCar/add", {params: {
           option:this.addObj.option,
           number:this.goods.number,
          name:this.goods.name,
          brand:this.goods.brand,
          genre:this.goods.genre,
          price:this.goods.price,
          sellPrice:0,
          num:this.goods.num,
          img:this.goods.img,
          nums:this.addObj.num,
          userId:this.loginUser.id
        }}).then(resp => {
            if (resp.data == "ok") {
              this.findVisible=false;
              this.findByUserId(this.loginUser.id);

            }
          }
      );
    },

    addGoods(){
      this.buyer.cadre=this.loginUser.name;
      this.buyer.userId=this.loginUser.id;
      axios.get("/project/buyer/add",{params:this.buyer}).then(resp=>{
        if (resp.data=="ok"){
          this.findByUserId(this.loginUser.id);
          this.addDiv=true;
        }
      })
    },
    async changeFace() {
  var reader = new FileReader();//定义文件读取流
  reader.readAsDataURL(document.getElementById("file").files[0]);
  reader.onload = function (ev) {
    document.getElementById("faceImg").src = ev.target.result;
  }

     //向服务器发送请求，完成添加
     var emObj = new FormData();
     emObj.append("uploadImg", this.$refs.faceFile.files[0]);
     //上传文件请求头
     let config = {
       headers: {'Content-Type': 'multipart/form-data'}
     }

     //接收服务器发送给客户端的上传文件名
     var face = "";
     await axios.post("/project/upload", emObj, config).then(resp => {
       face = resp.data;
     });

     //将上传文件名，添加到addObj对象中
     this.goods.img = face;
}
  },
  created() {
    this.getLoginUser();
    this.findAll();
  },

}
</script>

<style scoped>


</style>